<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>内容管理</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/res/third/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
		.lpdiv{display: inline-block;float: left;margin-left: 220px;margin-top: 15px;width: 100%;}
		.showimgs{display:inline-block;}
		.delimgas{display:inline-block;margin-left:50px;cursor:pointer;}
    #companyTable,#proTable{
        border-collapse: separate;
        border-spacing: 10px;
    }
</style>
	<script>
        //后台做过判断，size不大于10
        [#if canAdd?? && !canAdd]
        alert("楼层数量不允许超过10个，请删除再添加");
        top.closeTempTab(true);
        [/#if]
	</script>
</head>
<body>
    <div class="panel panel-info" style="height: 100%;overflow-y:scroll;">
	       <div class="panel-heading">
	          <h3 class="panel-title">添加楼层</h3>
	        </div>
        <div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" role="form"   id="mainForm">
			  <div class="form-group" style="margin-top:15px;">
			    <label for="title" class="col-sm-2 control-label">所在楼层:</label>
			    <div class="col-sm-5">
			        
			        <select name="floor">
			            [#list getallfloor as floor]
			        	<option>${floor}</option>
			        	[/#list]
			        </select>

			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label">所属类目:</label>
			    <div class="col-sm-5">
					<select name="categoryId" id="categoryId">
						<option value="">请选择</option>
						[#list topCategoryList as category]
						<option value="${category.id!}">${category.name!}</option>
						[/#list]
					</select>
				     [#--<input type="hidden" name="categoryId" id="categoryId">--]
			         [#--<input type="button"  value="选择类目" onclick="chooseCate()">--]
			         [#--<span id="categoryName" style="color:blue"></span>--]
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label" >左侧商铺:</label>
			    <div class="col-sm-8">
			    	<table id="companyTable">
			    	<tr>
			    		<td>
			    			<input type="number" min="1" id="seq" placeholder="序号" name="seq" style="width: 45px; text-align: center;" maxlength="4">
			    		</td>
			    		<td>
			    		    <input type="text" placeholder="输入商铺链接" id="companyUrl" required="required" name="companyUrl">
			    		</td>
			    		<td>
			    			<input type="button" onclick="addPicture(this)"  value="上传图片" >
							<div class="imgwrap" style="display: inline" ></div>
			    		</td>
			    		<td>
			    		    <span style="font-size:30px;cursor: pointer;" onclick="addCompany()">+</span>
			    		</td>
			    	</tr>
			    	</table>
                  </div>
			  </div>
			 
			 <div class="form-group">
			    <label for="title" class="col-sm-2 control-label" >右侧商品:</label>
			    [#--<input type="hidden" name="floorId" >--]
			    <div class="col-sm-5">
			    <table id="proTable">
			    <tr>
			      <td> <input type="number" min="1" id="seq" placeholder="序号" name="seq" style="width: 45px; text-align: center;" maxlength="4"></td>
					<td><input type="text" placeholder="选择商品" id="name" name="name" onclick="chooseProduct(this)"></td>
				    <td><input type="hidden"                      name="productId"    required="required"></td>
			        <td><span style="font-size:30px;cursor:pointer" onclick="addProduct()">+</span></td>
	            </tr>
			    </table>
			    </div>
             </div>
			 
			 <div class="form-group" style="margin-top: 10px;">
					<div style="margin-left:300px;">
						<button onclick="insert();" type="button" class="btn btn-info">立即提交</button>
					</div>
			</div>
			</form>
        </div>

        <div style="display: none;width: 600px;" id="providerDiv">
            <div style="border: 1px solid #ddd;padding-bottom: 8px;">
                <div>
                    <input style="display: inline-block;width: 160px;height: 30px;margin: 8px;" type="text" class="form-control" id="so_companyname" placeholder="公司/商品名称" name="so_companyname">
                    <button type="button" class="btn btn-info btn-xs delbtn" onclick="searchProvider()">查询</button>
                </div>
                <table class="table table-hover table-bordered table-striped table-condensed" id="companyTab" style="margin-bottom: 8px;">
                    <tr id="ftr">
                        <th width="4">#</th>
                        <th width="40%">商品名称</th>
                        <th width="8%">爆品价</th>
                        <th width="8%">会员价</th>
                        <th width="40%">来源公司</th>
                    </tr>
                </table>
                <div style="text-align: right;padding-right: 8px;">
                    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageUp()">上一页</button>
                    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageNext()">下一页</button>
                </div>
                <div style="text-align:center;">
                    <button type="button" class=" btn-primary  delbtn" onclick="queDing()">确定</button>
                    <button type="button" class=" btn-primary  delbtn" onclick="quXiao()">取消</button>
                </div>

            </div>
            [#--页码--]
            <input id="pageNo" type="hidden" value="1">
            [#--页码总数--]
            <input id="pageTotal" type="hidden">
            [#--输入元素--]
            <input id="so_companyname_back" type="hidden">
        </div>

	</div>


    [#--商铺追加的内容--]
    <script type="text/html" id="companyTemplate">
        <tr>
            <td>
                <input type="number" min="1" placeholder="序号" name="seq" style="width: 45px; text-align: center;">
            </td>
            <td>
                <input type="text" placeholder="输入商铺链接" id="companyUrl" required="required" name="companyUrl">
            </td>
            <td>
                <input type="button" value="上传图片" onclick="addPicture(this)">
                <div class="imgwrap" style="display: inline" ></div>
            </td>
            <td>
            </td>
            <td>
                <span style="cursor:pointer;font-size: 15px" onclick="removeCompany(this)">删除</span>
            </td>
        </tr>
    </script>


    [#--产品追加的内容--]
<script type="text/html" id="productTemplate">
<tr>
	<td>
	<input type="number"  min="1" id="" placeholder="序号" name="seq" style="width: 45px; text-align: center;" maxlength="4">
	</td>
	<td>
		<input type="text" placeholder="选择商品" id="name"  name="name" onclick="chooseProduct(this)">
	    <input type="hidden"  name="productId"  required="required">
	</td>
	<td>
	<span style="cursor:pointer;font-size: 15px" onclick="removeProduct(this)">删除</span>
	</td>
</tr>
</script>

<script>
     
//      var cdialog;
//      function chooseCate(categoryId) {
//          categoryId=categoryId||'';
//          cdialog=art.dialog.load("选择所属类目","/category/v_choose_category.do?curent=" + categoryId);
//      }
//
//      function chooseCallback(name, id,topid) {
//    	  cdialog.close();
//    	  $('#categoryId').val(id);
//    	  $('#categoryName').text(name);
//      }

      function addCompany() {
          $("#companyTable").append($("#companyTemplate").html());
      }

      function removeCompany(remove){
           $(remove).parents("tr").remove();
      }

      function addProduct(){
          $("#proTable").append($("#productTemplate").html());
      }

      function removeProduct(remove){
          $(remove).parents("tr").remove();
      }

      var index;
      var dialogAddCom;
      function chooseProduct(obj){
         if($("#categoryId").val().trim()==""){
             alert("请先选择类目");
             return;
		 }
		 //找到上级tr的序号
		 index=$(obj).parents('tr').index();
          dialogAddCom=art.dialog({
              title:"选择商品",
			  lock:true,
              content: document.getElementById('providerDiv')
		  });
          initProvider(1);
	  }

function initProvider(pageNo,so_companyname){
    art.dialog.post({
        url:'/shop/chooseproduct.do',
        data:{
            pageNo : pageNo,so_companyname:so_companyname, so_categoryFId : $('#categoryId').val()
        },
        success : function(data){
            if(data.success){
                //后面的tr全部删除
                $("#ftr").nextAll().remove();
                //返回属性的集合
                var productList=data.attributes.productList;
                for (var i = 0; i < productList.length; i++) {
                    $("#companyTab").append("<tr>"
                            +"<td>"+'<input type=\'radio\' name=\'productId\' value="'+productList[i].id+' ">'+"</td>"
                            +"<td  style='cursor: pointer;'><a target='_blank' href='http://${webSite}/offer/"+productList[i].id+".html'>" +productList[i].name+"</td>"
                            +"<td>"+productList[i].hotPrice+"</td>"
                            +"<td>"+productList[i].memberPrice+"</td>"
                            +"<td>"+productList[i].companyName+"</td>"
                            +"</tr>");
                }
                //总页数
                $("#pageTotal").val(data.attributes.totalPage);
                //一页显示的集合
                $("#pageNo").val(data.attributes.pageNo);
                //查到输入所有公司的集合
                $("#so_companyname_back").val(data.attributes.so_companyname)
            }else{
                error_msg(data.msg , function(){location.reload();});
            }
        }

    },"数据初始化中.... ");

}

function queDing(){
    var chooseChecked=$("input[name=productId]:checked").val();
    if(!chooseChecked){
        alert("请选择一个商品名称显示在页面上");
    }else{
        var choose=$("input[name=productId]:checked").parents().next().find('a').text();
        sendBackCName(chooseChecked,choose);
    }
}

function quXiao(){
    dialogAddCom.close();
}
//回调
function sendBackCName(cid,cname){
    //商品tr第几个的商品名称
    $("#proTable tr").eq(index).find('input[name$=name]').val(cname);
    //商品tr下第几个商品id
    $('#proTable tr').eq(index).find('input[name$=productId]').val(cid);
    dialogAddCom.close();
}

function searchProvider(){
    //公司/商品名称赋值
    var so_companyname=$("#so_companyname").val();
    initProvider(1,so_companyname);
}
//上一页
function pageUp(){
    //输入框赋值
    var pageNo=$("#pageNo").val();
    //解析字符串，返回一个整数
    pageNo=parseInt(pageNo);
    if(pageNo!=1){
        //页码减1
        pageNo=pageNo-1;
    }
    //回调公司名称
    var so_companyname=$("#so_companyname_back").val();
    initProvider(pageNo,so_companyname);
}
//下一页
function pageNext(){
    var pageNo=$("#pageNo").val();
    var pageTotal=$("#pageTotal").val();
    pageNo=parseInt(pageNo);
    if(pageNo!=pageTotal){
        pageNo=pageNo+1;
    }
    var so_companyname=$("#so_companyname_back").val();
    initProvider(pageNo,so_companyname);
}

var dialogPicture=null;
var ind;
function addPicture(obj){
    ind=$(obj);
    dialogPicture= art.dialog.uploadFile
    ("上传图片",{callback:"uploadcallback",userpath:"admin",extensions:"gif,jpg,png,jpeg,bmp"});
}
function uploadcallback(response){
     dialogPicture.close();
     ind.next().html("<span>"
             +"<input type='hidden' name='companyImg' value='"+response.url+"  "+response.url+"'/>"
             +"<a target='_blank'   href='"+response.url+"' ><img src='"+response.url+"' style='width: 50px;height: 50px;' ></a>"
             +"</span>");
}
        //立即提交按钮
     	function insert() {
            var catid = $("#categoryId").val();
            if (catid == "") {
                alert("请输入类目");
                return;
            }
            var isOk = true;
            //循环赋值
            $.each($("#companyTable tr"),function(i,v){
                    var seq=$(v).find('input[name$=seq]');
                    var companyUrl=$(v).find('input[name$=companyUrl]');
                    var companyImg=$(v).find('input[name$=companyImg]');
                    seq.prop('name','companyList['+i+'].seq');
                    companyUrl.prop('name','companyList['+i+'].companyUrl');
                    companyImg.prop('name','companyList['+i+'].companyImg');

                    if($.trim(companyUrl.val()) == '') {
                        alert('请输入商铺链接');
                        isOk=false;
                        return false;
                    }
                });
            }

            $.each($('#proTable tr'), function (i, v) {
                var seqInput = $(v).find('input[name$=seq]');
                var productId = $(v).find('input[name$=productId]');
                seqInput.prop('name', 'productList[' + i + '].seq');
                productId.prop('name', 'productList[' + i + '].productId');
                if($.trim(productId.val()) == '') {
                    alert('请选择商品');
                    isOk=false;
                    return false;
                }
            });

            if(isOk) {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/shop/insert.do",
                    data: $("form").serialize(),
                    success: function (aj) {
                        if (aj.success) {
                            alert(aj.msg);
                            top.closeTempTab(true);
                        }
                    }
                });
            }
        }
</script>
</body>
</html>